<template>
  <div class="send_index">
    <div class="send_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待发货<i class="el-icon-close"></i></div>
    </div>
    <div class="send_index_bottom">
      <div class="send_index_bottom_new">
        <div class="send_index_bottom_new_goods">
          <div class="send_index_bottom_new_goods_btn"></div>
          <div class="send_index_bottom_new_goods_screening">
            <div class="send_index_bottom_new_goods_screening_left">
              <i>下单时间</i>
              <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                @change="selectTime"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </div>
            <div class="send_index_bottom_new_goods_screening_right">
              <el-input
                v-model="input"
                @input="clearInput"
                clearable
                placeholder="请输入订单信息查询"
              ></el-input>
              <button @click="searchBtn"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="send_index_bottom_table_box">
        <div class="send_index_bottom_table">
          <table>
            <tr>
              <th>订单号</th>
              <th>下单时间</th>
              <th>下单人</th>
              <th>手机号</th>
              <th>商品数量</th>
              <th>总价</th>
              <th>定金</th>
              <th>配送</th>
              <th>订单类型</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v, i) in tableList" :key="i">
              <td>{{ v.order_code }}</td>
              <td>{{ v.create_time | dateformat("YYYY-MM-DD HH:mm:ss") }}</td>
              <td>{{ v.username }}</td>
              <td>{{ v.mobile }}</td>
              <td>{{ v.num }}</td>
              <td>{{ v.price }}</td>
              <td>{{ v.deposit_price }}</td>
              <td>{{ v.move_way == "1" ? "快递" : "自提" }}</td>
              <td>
                {{
                  v.buy_type == 0
                    ? "普通商品"
                    : v.buy_type == 1
                    ? "秒杀商品"
                    : "拼团商品"
                }}
              </td>
              <td>
                <button class="editor" @click="_toShopInfo(v.id)">详情</button>
                <button
                  class="shelves"
                  @click="toSendOrder(v.id)"
                  v-if="v.buy_type != 2"
                >
                  发货
                </button>
                <button
                  class="shelves"
                  @click="toSendOrder(v.id)"
                  v-else-if="v.buy_type == 2 && v.pintuan_status == 2"
                >
                  发货
                </button>
                <button
                  class="shelves"
                  @click="toTisp()"
                  v-else-if="v.buy_type == 2 && v.pintuan_status == 1"
                >
                  拼团中
                </button>
                <button class="shelves" v-else>拼团失败</button>
                <!-- <button class="delete">关闭订单</button> -->
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title" colspan="9">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="send_index_bottom_page">
      <div class="send_index_bottom_page_left"></div>
      <div class="send_index_bottom_page_right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      checkAll: false,
      checkBoxAll: [], // 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      startDate:'',
      endDate:'',
      sid: null,
    };
  },
  mounted() {
    this.sid = localStorage.getItem("sid");
    this._getOrdersList();
  },
  methods: {
    // 选择时间
    selectTime() {
      const that = this;
      if(that.value2){
        that.startDate = that.$moment(that.value2[0]).format('yyyy-MM-DD HH:mm:ss')
        that.endDate = that.$moment(that.value2[1]).format('yyyy-MM-DD HH:mm:ss')
      }else{
        that.startDate = '',
        that.endDate = ''
      }
      that.page = 1;
      that.pagesize = 10;
      that._getOrdersList()
    },

    // 搜索按钮
    searchBtn(){
      const that = this;
      that.page = 1
      that.pagesize = 10
      that._getOrdersList()
    },
    // 清除搜索
    clearInput(){
      const that = this;
      if(that.input == ''){
        that.page = 1
        that.pagesize = 10
        that._getOrdersList()
      }
    },
    // 跳转到详情页
    handerDetails() {
      this.$router.push({
        path: "/sendDetails",
      });
    },
    // 获取待发货订单
    _getOrdersList() {
      this.$http
        .post("/api/admin/shop/productOrder/lst", {
          store_id: this.sid,
          order_status: 2,
          page: this.page,
          pagesize: this.pagesize,
          start_date: this.startDate,
          end_date: this.endDate,
          keyword: this.input
        })
        .then((res) => {
          if (res.code == 1) {
            console.log(res);
            this.tableList = res.data.data ? res.data.data : [];
            this.total = res.data.count; //总条数
          }
        });
    },

    //点击详情跳转
    _toShopInfo(order_id) {
      this.$router.push({
        path: `/sendDetails?order_id=${order_id}`,
      });
    },
    // 点击发货
    toSendOrder(order_id) {
      console.log(order_id, "------------");
      this.$router.push({
        name: "sendDetails",
        query: {
          order_id,
          status: true,
        },
      });
    },
    toTisp() {
      this.$message({
        message: "该商品正在拼团中",
        type: "warning",
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.page = 1
      this._getOrdersList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this._getOrdersList();
    },
  },
};
</script>

<style lang="less" scoped="scoped">
@import "index.less";
</style>
